<div>
  <ul class="title capital-letters bottom-tab-margin-around " style="background-color: #1e213d; color:#4971ff !important ;">
    <!-- <li>{{'Data_Visualization.Overall.Overall' | translate}}</li> -->
    <li>{{'Data_Visualization.Overall.Incident_Analytics' | translate}}</li>
    <!-- <li>{{'Data_Visualization.Overall.Traffic_Analytics' | translate}}</li> -->
    <!-- <li>{{'Data_Visualization.Overall.Equipment_Analytics' | translate}}</li> -->
  </ul>
</div>
<div class="content bottom-tab-margin-around totalArea">
  <div class="row">

    <div class="col">
      <div class="col-title capital-letters">
        {{'Data_Visualization.IncidentAnalytics.Incident_Category' | translate}}
      </div>
      <div class="col-body col-pie">
        <div class="pie-1 echartsContainer">
          <div echarts [options]="category_options_last" class="pie"></div>
          <div class="echartsName">{{'Data_Visualization.IncidentAnalytics.Last_year' | translate}}</div>
        </div>
        <div class="pie-2 echartsContainer">
          <div echarts [options]="category_options_this" class="pieLegend"></div>
          <div class="echartsName2 ">{{'Data_Visualization.IncidentAnalytics.This_year' | translate}}</div>
        </div>
      </div>
    </div>

    <div class="col">
      <div class="col-title capital-letters">
        {{'Data_Visualization.IncidentAnalytics.zone' | translate}}
      </div>
     
      <div class="col-body">
        <div echarts [options]="zone_options" class="line"></div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="col-title capital-letters">
        {{'Data_Visualization.IncidentAnalytics.Incident_Pattern' | translate}}
      </div>
      <div class="col-body">
        <div echarts [options]="pattern_options" class="line"></div>
      </div>
    </div>
    <div class="col">
      <div class="col-title capital-letters">
        {{'Data_Visualization.IncidentAnalytics.Month' | translate}}
      </div>
      <div class="col-body">
        <div echarts [options]="month_options" class="line"></div>
      </div>
    </div>
  </div>
  <div class="row">

    <div class="col">
      <div class="col-title capital-letters">
        {{'Data_Visualization.IncidentAnalytics.Incident_Type' | translate}}
      </div>
      <div class="col-body col-pie">
        <div class="pie-1 echartsContainer">
          <div echarts [options]="type_options_last" class="pie"></div>
          <div class="echartsName changePosition2">{{'Data_Visualization.IncidentAnalytics.Last_year' | translate}}</div>
        </div>
        <div class="pie-2 echartsContainer">
          <div echarts [options]="type_options_this" class="pieLegend"></div>
          <div class="echartsName2  changePosition2" >{{'Data_Visualization.IncidentAnalytics.This_year' | translate}}</div>
        </div>
      </div>
    </div>

    <div class="col">
      <div class="col-title capital-letters">
        {{'Data_Visualization.IncidentAnalytics.Incident_Reason' | translate}}
      </div>
      <div class="col-body col-pie">
        <div class="pie-1">
          <div echarts [options]="reason_options_last" class="pie"></div>
          <div class="echartsName">{{'Data_Visualization.IncidentAnalytics.Last_year' | translate}}</div>
        </div>
        <div class="pie-2">
          <div echarts [options]="reason_options_this" class="pieLegend"></div>
          <div class="echartsName2">{{'Data_Visualization.IncidentAnalytics.This_year' | translate}}</div>
        </div>
      </div>
    </div>
    
  </div>
</div>